<script setup>
import { onMounted } from "vue";
import Split from 'split.js'
import Tree from './components/Tree.vue'

onMounted(() => {
  Split(['#tree-panel', '#content-panel'], {
    sizes: [20, 80],
    minSize: [0, 0],
    gutterSize: 6,
  })
})

</script>

<template>
  <div class="fixed w-screen h-screen overflow-hidden flex flex-col">
    <div class="border-b border-color h-8 flex items-start gap-2 px-2">
      <router-link to="/form">
        <a-button size="mini">
          <template #icon>
            +
          </template>
        </a-button>
      </router-link>
    </div>
    <div class="flex-1 w-full h-0 flex">
      <div id="tree-panel">
        <Tree />
      </div>
      <div id="content-panel">
        <router-view />
      </div>
    </div>
    <div class="border-t border-color h-7"></div>
  </div>
</template>

<style scoped></style>
